<template>

<div class="container">
<el-form :model="ruleForm" status-icon :rules="rules" ref="loginForm" label-width="80px" class="demo-ruleForm">
    <!-- <div style="text-align: center;margin-bottom: 30px;">登录页</div> -->
  <el-form-item label="用户名" prop="username">
    <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input type="password" v-model="ruleForm.password" autocomplete="off" size="default"></el-input>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="submitForm()">提交</el-button>
  </el-form-item>
</el-form>
</div>
</template>

<script setup>

const ruleForm = reactive({
    username:'',
    password:''
})
const loginForm = ref()

const rules = reactive({
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 8, message: '输入内容最多8个最少3个', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 3, max: 8, message: '输入内容最多8个最少3个', trigger: 'blur' }]
})
const submitForm = ()=>{
    localStorage.setItem('token','123')
    loginForm.value.validate((value)=>{
        // console.log(value);
        if(value){
            console.log(ruleForm.username,ruleForm.password);
        }else{
           
        }
    })
}
</script>

<style scoped>
.container{
    width: 100%;
    height: 100vh;
    display: flex;
}
.demo-ruleForm{
    /* margin-top: 20px; */
    padding: 100px;
    width: 500px;
    height: 300px;
    margin: auto;
    background-color: rgba(0, 0, 0, 0.7);
}
:deep(.el-form-item__label){
    color: white;
}
</style>
